<template>
    <div class="map-legend-wrapper" @click="isOpen = !isOpen" v-show="legend[0].visible">
        <div class="map-legend" v-if="isOpen" >
            <div class="echart-title" v-for="ld in legend" :key="ld.title">
                <h3 class="title-decorate" v-if="isShowTitle(ld)">{{ld.title}}</h3>

                    <div class="m-scroll-container">
                        <div class="m-scroll-content">
                            <ul class="decorate-list">
                                <li style="display:block" v-for=" item in ld.items" :key="item.label">
                                    <template v-if="item.visible">
                                        <span class="decorate-color" :style="{ background: item.color, 'border-radius':item.isRound?'50px':'0px',border: item.border } "></span>
                                        <span class="decorate-text">{{item.label}}</span>
                                    </template>
                                </li>
                            </ul>
                        </div>
                    </div>

            </div>
        </div>
        <div v-else>图例</div>
    </div>

</template>

<script>
export default {
  name: 'MapLegend',
  props: {
    legendData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      isOpen: true
    }
  },
  methods: {
    isShowTitle (ld) {
        if(JSON.stringify(ld) !== "{}"){
            let isShow = false
            for (let i = 0; i < ld.items.length; i++) {
                let item = ld.items[i]
                if (item.visible) {
                isShow = true
                break
                }
            }
            return isShow
        }
    }
  },
  computed: {
    legend(){
        let reverseLegendData = []
        for(let i=this.legendData.length-1;i>=0;i--){
            reverseLegendData.push(this.legendData[i])
        }
        return reverseLegendData
    }
  }
}
</script>

<style lang="stylus">
.map-legend-wrapper {
    max-height: 350px
}
.map-legend {
    max-height: 350px
}

/* 页面样式 */
/* 面板标题 */
.echart-title {
    position: relative;
    z-index: 1;
    // margin: 0.5555555555555556rem 0 0 0.5555555555555556rem;
    margin: 0 0 0 0;
    color: #FFFFFF;
}

.title-decorate {
    margin: 0;
    font-size: 12px;
    font-weight: bold;
    color: #fff; /*#3498DB;*/
}

.title-decorate:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0.16666666666666666rem;
    width: 0.1111111111111111rem;
    height: 1em;
    opacity: 0.5;
}

.title-decorate:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0.5555555555555556rem;
    width: 0.3333333333333333rem;
    height: 1em;
}

.decorate-color {
    /* background #edd430 */
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 5px;
    margin-bottom: -1px;
}

.decorate-text {
    font-size: 12px;
}

.decorate-list > li {
    margin: 0px 0;
}

// 滚动条的样式问题
.m-scroll-container{
    margin-left: 9px;
    overflow: hidden;
}
.m-scroll-content{
    // width: calc(100% + 20px);
    width:100%;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 150px;
    min-height: 25px;
}
.m-scroll-content::-webkit-scrollbar {
        /*高宽分别对应横竖滚动条的尺寸*/
        width: 6px;
        height: 10px;
    }
// .m-scroll-content {
//     height: 266px;
//     overflow-y: auto;
//     overflow-x: hidden;
// }
.m-scroll-content::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #999;
}
.m-scroll-content::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: #3F4147;
}
.m-scroll-content::-webkit-scrollbar-thumb:hover{
    background: #f5f5f5;
}

.decorate-list {
    height: 100%;
}
</style>
